<template>
    <div class="iKCdHH">
        <div class="fCytZy">
            <div class="sc-1d9uflq-1 kjzgGw">
                <h1 class="cmoiYo">项目信息</h1>
                <p class="hVuhLe">请输入你的项目基本信息</p>
                <div class="fyoXML">
                    <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="width:100%;margin-top:50px;">

                            <el-form-item label="项目图标">
                              <div class="sc-494z8g-0 sc-494z8g-1 bDgoGc">
                                  <div class="gvwTmF" @click="projectIconsVisible = true" :style="{backgroundImage:'url('+ projectIconSelect +')'}" />
                              </div>
                            </el-form-item>

                            <el-form-item label="项目名称" prop="projectName">
                              <el-input v-model="form.projectName"></el-input>
                            </el-form-item>

                            <el-form-item label="项目代号" prop="projectCode">
                              <el-input v-model="form.projectCode"></el-input>
                            </el-form-item>

                          <el-form-item class="next-step">
                              <el-button  type="primary"  @click="nextStep"> <i class="el-icon-s-promotion"></i> 下一步</el-button>
                          </el-form-item>
                    </el-form>

                </div>
            </div>
        </div>

        <!-- <git-publish-repo /> -->

        <el-dialog
            title="选择项目图标"
            :visible.sync="projectIconsVisible"
            width="600px">

            <el-avatar :size="50" class="projectIcon" :key="index" v-for="(item , index) in 31" src="https://empty">
                <img :src="showProjectIcon(item)" @click="selectProjectIcons(item)" />
            </el-avatar>

            <span slot="footer" class="dialog-footer">
                <el-button @click="projectIconsVisible = false">取 消</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>

import { validateProjectCode } from '@/api/api'
// import GitPublishRepo from '../com/alinesno/cloud/initializr/initiallizrSeed/connectCicd' ; 

export default {
    components: {
      // GitPublishRepo
    },
    data() {
      var validateProjectCodeRule = (rule, value, callback) => {
      if (value ===  '') {
        callback(new Error('必填'))
      } else {
          var code = this.form.projectCode ;

          validateProjectCode(code).then(response => {
            if ( response.data > 0) {
                  callback(new Error('项目标识已经存在，不能重复'))
              } else {
                callback()
            }
        })
        }
      }
      return {
        projectIconsVisible: false ,
        projectIconSelect: '',
        form:{
          templateId :'',
          projectName :'',
          projectCode :''
        },
        rules: {
          projectName: [
              { required: true, message: '请输入项目名称', trigger: 'blur' },
          ],
          projectCode: [
              { required: true, message: '请输入项目代号', trigger: 'blur' },
              { required: true, validator: validateProjectCodeRule , trigger: 'blur' }
          ]
        } ,
      }
    },
    mounted(){
      this.projectIconSelect = require('@/asserts/icons/project/12.svg');

      var seedProjectCode = sessionStorage.getItem("seedProjectCode") ;
      this.form = JSON.parse(seedProjectCode) ;
    },
    methods: {
      showProjectIcon(item){
        return require('@/asserts/icons/project/' + item + '.svg');
      },
      selectProjectIcons(item){
        this.projectIconsVisible  = false ;
        this.projectIconSelect = require('@/asserts/icons/project/' + item + '.svg')
      },
      nextStep(){
        var fromWhere = this.$route.params.fromWhere ;

        // 模板id
        var templateId = sessionStorage.getItem("templateId") ;
        this.form.templateId = templateId ;

        sessionStorage.setItem("projectCode", this.form.projectCode) ;

        this.$refs["form"].validate(valid => {
          if (valid) {

            sessionStorage.setItem("seedProjectCode" , JSON.stringify(this.form)) ;

            var pId = 1 ;
            const path = "/build/com/alinesno/cloud/initializr/initiallizrSeed/connectCicd/" + pId;
            this.$router.push(path) ;
          }
        });

      }
    }
  }
</script>

<style scoped lang="scss">

@import '@/asserts/css/build/component.scss';

.projectIcon {
  margin: 10px;
  cursor: pointer;
  background: #f7f9fa;
}

.next-step{
  text-align: right;
}

.gvwTmF{
  margin-bottom: 0px;
}

</style>


